/**
 * 登录页面样式
 * @author xiaoxujs
 */
import styled from "styled-components";
import LoginLogo from '../../assets/image/Login/login_logo.png'; // 登录logo
import Login_bg from '../../assets/image/Login/login_bg.png'

export const LoginBox = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  background: url(${Login_bg});
  background-size: 100% 100%;
  .gun{
    width: .2rem;
    height: 28rem;
    background: #8B8882;
    border-radius: .1rem;
  }

`;
export const LoginLeftBox = styled.div`
  width: 98.9rem;
  display: flex;
  align-items: center;
  justify-content: end;
  .meirong_box{
    width: 74.2rem;
    margin-right: 3.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .image_box{
      width: 21.8rem;
      height: 15.9rem;
      background: url(${LoginLogo});
      background-size: 100% 100%;
      margin-bottom: 7.1rem;
    }
    .text_box{
      font-family: STZhongsong;
      font-weight: 400;
      font-size: 6rem;
      color: #FFFFFF;
      text-align: center;
    }
  }
`
export const LoginRightBox = styled.div`
  .from_box{
    width: 53.1rem;
    margin-left: 8.3rem;
    .input_box{
      width: 53.1rem;
      height: 7.4rem;
      border-radius: 3.6rem;
      border: .2rem solid #E3E3E1;
      display: flex;
      align-items: center;
      margin-bottom: 1.7rem;
      .input_title_icon{
        width: 7.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          font-size: 3.6rem;
          color: #958B83;
        }
      }
      .input_gun{
        width: .2rem;
        height: 3rem;
        background: #8B8882;
        border-radius: .1rem;
      }
      .input_style{
          border: none;
          height: 3.6rem;
          background: none;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 2.7rem;
          color: #958C84;
          padding-left: 1rem;
      }
      .input_style:focus {
          outline: none;
          padding-left: 1rem;
      }
      /* .input_style::-webkit-autofill {
background-color: red;
background-image: none;
color: #000;
} */
      /* input:-webkit-autofill{ transition-delay:99999s; transition: color99999s ease-out,background-color99999s ease-out; }
      input:-webkit-autofill:active{ transition-delay:99999s; transition: color99999s ease-out,background-color99999s ease-out; }
      input:-webkit-autofill:focus{ transition-delay:99999s; transition: color99999s ease-out,background-color99999s ease-out; }
      input:-webkit-autofill:hover{ transition-delay:99999s; transition: color99999s ease-out,background-color99999s ease-out; } */
    }
    .yanzhengma_box{
      display: flex;
      align-items: center;
      .yanzhengma_input_box{
        width: 296px;
        height: 74px;
        border-radius: 36px;
        border: 2px solid #E3E3E1;
        display: flex;
        align-items: center;
        margin-right: 2rem;
        .input_style{
          border: none;
          height: 3.6rem;
          background: none;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 2.7rem;
          color: #958C84;
          padding-left: 4rem;
       
        }
        .input_style:focus {
          outline: none;
          padding-left: 4rem;
      }

      }
      .image_style{
          width: 21.6rem;
          height: 7.2rem;
          background: #D7D7D7;
          border-radius: 3.6rem;
        }
    }
    .button_style{
      width: 52.9rem;
      height: 7.2rem;
      background: #E3E3E1;
      border-radius: 3.6rem;
      margin-top: 1.7rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 2.7rem;
      color: #56857B;
      cursor: pointer;
    }
  }
`



